<script lang="ts" setup>
import { computed, onActivated, ref } from "vue"
import { useStore } from "vuex"
import bus from "@/eventBus"
const computeAnimateDuration = computed(() => (i: number) => i < 6 ? i * 0.3 : 1.7999999999999998)
const store = useStore()
const isLoad = ref<boolean>(false)

onActivated(() => {
  bus.state.title = "随笔"
  setTimeout(() => {
    window.scrollTo({
      top: 100,
      behavior: "smooth",
    })
    isLoad.value = true
  }, 200)
})
</script>

<template>
  <div class="essays" v-if="isLoad">
    <div
      class="item"
      v-for="(item, i) in store.state.essays"
      data-aos="fade-left"
      :style="'--t:' + computeAnimateDuration(i + 1) + 's;'"
    >
      <div class="date">{{ item.date }}</div>
      <div class="essay-content">{{ item.content }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(70px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.essays {
  width: 100%;
  margin-top: 20px;
  .item {
    text-align: left;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    animation: fadeInBottom var(--t) ease-in-out;
    color: var(--TextColor);
    transition: var(--basic-transition);
    .date {
      font-size: 18px;
    }
    .essay-content {
      font-size: 16px;
      margin-top: 5px;
    }
  }
}
</style>
